<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24" :offset="0">
        <el-card>
          <div class="chart" ref="lineRef"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mt-5">
      <el-col :span="12" :offset="0">
        <el-card>
          <div class="chart" ref="barRef"></div>
        </el-card>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-card>
          <div class="chart" ref="pieRef"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { chartGet } from "../../api/job";
import bar from "./options/bar";
import line from "./options/line";
import pie from "./options/pie";
const barRef = ref<HTMLDivElement | null>(null);
const lineRef = ref<HTMLDivElement | null>(null);
const pieRef = ref<HTMLDivElement | null>(null);
onMounted(async () => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(barRef.value);
  // 绘制图表
  myChart.setOption(bar);

  //绘制折线图
  var lineChart = echarts.init(lineRef.value);
  lineChart.setOption(line);

  //绘制饼状图
  var pieChart = echarts.init(pieRef.value);
  let res = await chartGet();
  // console.log(res);
  let { list } = res.data.results[0];
  pie.series[0].data = list;
  pieChart.setOption(pie);
});
</script>

<style scoped>
.chart {
  height: 280px;
}
</style>
